<template>
  <div class="app-container">
    <el-form ref="submitForm" :model="form" :rules="rules" label-width="80px">

      <el-form-item label="活动图片" prop="pic" class="pic">
        <oss :limit="1" v-model="form.pic" ossURL="/oss/uploadPicActity" />
      </el-form-item>
      <el-form-item label="活动标题" prop="serviceTitle">
        <el-input maxlength="100"  v-model="form.serviceTitle" placeholder="请输入服务标题" />
      </el-form-item>
      <el-form-item label="活动说明" prop="illustrate">
        <el-input maxlength="300" v-model="form.illustrate" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="活动介绍" prop="description">
        <editor v-model="form.description" height="500px" />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center;" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { updateActity } from "@/api/frist/actity";
export default {
  data() {
    return {
      // 表单参数
      form: {
        id: "",
        pic: "",
        serviceTitle: "",
        illustrate: "",
        description: "",
        enabled: 1,
      },
      // 表单校验
      rules: {
        serviceTitle: [
          { required: true, message: "服务标题不能为空", trigger: "blur" },
        ],
        pic: [{ required: true, message: "活动图片不能为空", trigger: "blur" }],
        description: [
          { required: true, message: "活动介绍不能为空", trigger: "blur" },
          { validator: this.checkDescription, trigger: ['blur'] }
        ],
        illustrate: [
          { required: true, message: "服务说明不能为空", trigger: "blur" },
        ],
      },
    };
  },

  components: {
    oss: () => import("@/components/ImageUpload/oss.vue")
  },

  created() {
    let form = sessionStorage.getItem("row_activity");
    if (!form) {
      return;
    }
    this.form = JSON.parse(form);
  },

  methods: {
    checkDescription(rule, value, callback) {
      const cleanedContent = value.replace(/<[^>]*>/g, '').trim();

      if (cleanedContent === '') {
        callback(new Error('活动介绍不能为空'))
      } else {
        callback()
      }
    },



    /** 提交按钮 */
    submitForm() {
      this.$refs["submitForm"].validate((valid) => {
        if (!valid) {
          return false;
        }

        if (!this.form.id) {
          return false;
        }

        updateActity(this.form).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.$router.push({
            path: "/frist/actity",
          })
        });
      });
    },

    cancel() {
      this.$router.back()
    }
  },
};
</script>

<style>
.pic .el-upload-dragger {
  width: 150px;
  height: 150px;
}
</style>
